<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        li{
            width: 600px;
            margin: 10px 0px;
            padding: 10px;
            border: 1px solid #999;
            line-height: 10px;
        }
    </style>
    <script src="./JQ/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            // ID 选择器
            // $('#List').css('border', '5px solid #f00');
            // $('#List').css('bcakground-color','#abcdef');
            // tagName 标签选择器
            // $('h1').css('border', '5px solid #f00');
            // $('li').css('border', '5px solid #f00');

            // $('#list li').css('border', '5px solid #f00');
            // $('#list li').css('border', '5px solid #f00');
            // $('.item+li').css('border', '5px solid #f00');
            // $('.item+li').css('border', '5px solid #f00');

            // :first
            // $('#list li:forst').css('border', '5px solid #f00');
            // $('#list li:eq(1)').css('border', '5px solid #f00');
            // $('#list li:eq(2)').css('border', '5px solid #f00');
            // $('#list li:eq(3)').css('border', '5px solid #f00');
            // $('#list li:eq(9)').css('border', '5px solid #f00');

            // $("li:contains('沙')").css('border', '5px solid #f00');
            // 包含有
            $("#list li:has('.item')").css('border', '5px solid #f00');

            // $('#imglist img[windth]').css('border', '5px solid #f00');
            // $('#imglist img[windth='200']').css('border', '5px solid #f00');
            // $('#imglist img[windth!='200']').css('border', '5px solid #f00');
            // $('#imglist img[alt^="t"]').css('border', '5px solid #f00');
            // $('#imglist img[title$="1"]').css('border', '5px solid #f00');
            // $('#imglist img[title*="i"]').css('border', '5px solid #f00');
            // $('img[src][sidth=200][alt^="t"][title^="p"]').css('border', '5px solid #f00');
        })
    </script>   
</head>
<body>
    <h1 title="hhh1">JQuery 选择器</h1>
    <hr>

    <div id="imglist">
        <img src="./imgs/1.jpg" alt="t1" width="201" height="300" title="pic1">
        <img src="./imgs/2.jpg" alt="t1" width="200" height="300" title="pic2">
        <img src="./imgs/3.jpg" width="200" height="300" title="img1">
        <img src="./imgs/4.jpg" alt="t4" width="200" height="300" title="img2">
        <img src="./imgs/5.jpg" alt="t5" width="205" height="300" title="tu1">

    </div>

    <img src="./imgs/5.jpg" alt="t6" width="200" height="300" title="tu2">

    <ul id="list">
        <li>东 和我 去打游戏</li>
        <li>西 和我 去跑步</li>
        <li>
            南 和我 去吃饭
            <ul>
                <li>东 和我 去打游戏</li>
                <li>西 和我 去跑步</li>
                <li>南 和我 去吃饭</li>
                <p>我不是中</p>
                <li class="item">北 和我 去客厅</li>
                <li>东北 和我 去逛街</li>
                <li>西南 和我 去游泳</li>
            </ul>
        </li>
        <li class="item">北 和我 去客厅</li>
        <li>东北 和我 去逛街</li>
        <li>西南 和我 去游泳</li>
    </ul>

    <hr>

    <ul>
        <li>东 和我 去打游戏</li>
        <li>西 和我 去跑步</li>
        <li>
            南 和我 去吃饭
            <ul>
                <li>东 和我 去打游戏</li>
                <li>西 和我 去跑步</li>
                <li>南 和我 去吃饭</li>
                <p>我不是中</p>
                <li>北 和我 去客厅</li>
                <li>东北 和我 去逛街</li>
                <li>西南 和我 去游泳</li>
            </ul>
        </li>
        <li>北 和我 去客厅</li>
        <li>东北 和我 去逛街</li>
        <li>
            西南 和我 去游泳
            <ul>
                <li>东 和我 去打游戏</li>
                <li>西 和我 去跑步</li>
                <li>南 和我 去吃饭</li>
                <p>我不是中</p>
                <li>北 和我 去客厅</li>
                <li>东北 和我 去逛街</li>
                <li>西南 和我 去游泳</li>
            </ul>
        </li>
    </ul>

    <hr>
    <ul>
        <li>东 和我 去打游戏</li>
        <li>西 和我 去跑步</li>
        <li>南 和我 去吃饭</li>
        <p>我不是中</p>
        <li>北 和我 去客厅</li>
        <li>东北 和我 去逛街</li>
        <li>西南 和我 去游泳</li>
    </ul>
</body>
</html>